import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Typography, Button, Dropdown, Space, Avatar, Modal, Layout as AntLayout, Menu } from 'antd'
import { UserOutlined, LogoutOutlined, UserOutlined as UserCenterOutlined, QuestionCircleOutlined, HomeOutlined, VideoCameraOutlined, FolderOutlined, SearchOutlined, TagsOutlined, UserSwitchOutlined, DownOutlined, SettingOutlined } from '@ant-design/icons'
import { useAuth } from './useAuth'
import { ROUTES } from '../../router/routes'

const { Title, Text } = Typography
const { Sider, Header, Content } = AntLayout

function Layout() {
  const navigate = useNavigate()
  const location = useLocation()
  const { isLoggedIn, user, logout } = useAuth()

  // 左侧菜单配置
  const menuItems = [
    {
      key: ROUTES.HOME,
      icon: <HomeOutlined />,
      label: '主页提取',
    },
    {
      key: ROUTES.SINGLE_VIDEO,
      icon: <VideoCameraOutlined />,
      label: '单作品提取',
    },
    {
      key: ROUTES.COLLECTION,
      icon: <FolderOutlined />,
      label: '合集提取',
    },
    {
      key: ROUTES.KEYWORD,
      icon: <SearchOutlined />,
      label: '关键词提取',
    },
    {
      key: ROUTES.TOPIC,
      icon: <TagsOutlined />,
      label: '话题提取',
    },
    {
      key: ROUTES.MY_PROFILE || '/my-profile',
      icon: <UserSwitchOutlined />,
      label: '我的主页提取',
    },
  ]

  // 处理菜单点击
  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key)
  }

  // 处理教程文档链接
  const handleTutorialClick = () => {
    window.open('https://example.com/tutorial', '_blank')
  }


  const userMenuItems = [
    { key: 'profile', label: '个人设置', icon: <UserCenterOutlined /> },
    { key: 'settings', label: '软件设置', icon: <SettingOutlined /> },
    { key: 'divider', type: 'divider' as const },
    { key: 'logout', label: '退出', icon: <LogoutOutlined /> }
  ]

  return (
    <AntLayout style={{ height: '100vh', background: '#f0f2f5' }}>
      {/* 左侧菜单 */}
      <Sider
        width={200}
        style={{
          background: '#fff',
          boxShadow: '2px 0 8px rgba(0,0,0,0.06)'
        }}
      >
        <div style={{
          padding: '16px',
          borderBottom: '1px solid #f0f0f0',
          textAlign: 'center',
          background: 'linear-gradient(135deg, #fe2c55 0%, #ff6b8a 100%)',
          margin: '8px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(254, 44, 85, 0.2)'
        }}>
          <Title level={4} style={{ 
            margin: 0, 
            color: '#fff',
            textShadow: '0 1px 2px rgba(0,0,0,0.1)',
            fontWeight: 'bold'
          }}>
            抖乎
          </Title>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={handleMenuClick}
          style={{
            border: 'none',
            background: 'transparent'
          }}
        />
      </Sider>

      <AntLayout>
        {/* 顶部导航栏 */}
        <Header style={{
          background: '#fff',
          padding: '0 24px',
          borderBottom: '1px solid #f0f0f0',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>

          <Space>
            {/* 教程文档按钮 - 小字体，倒数第二位置 */}
            <Button
              icon={<QuestionCircleOutlined style={{ fontSize: '10px', color: '#1890ff' }} />}
              onClick={handleTutorialClick}
              size="small"
              style={{ 
                color: '#1890ff',
                fontSize: '12px',
                height: '28px',
                padding: '0 8px',
                background: '#f0f8ff',
                borderColor: '#d6e4ff',
                borderRadius: '6px'
              }}
            >
              教程文档
            </Button>

            {isLoggedIn && user && (
              <Dropdown menu={{
                items: userMenuItems,
                onClick: ({ key }) => {
                  if (key === 'logout') {
                    Modal.confirm({
                      title: '确认退出',
                      content: '确定要退出登录吗？',
                      onOk: logout
                    })
                  }
                }
              }} placement="bottomRight">
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 4,
                  cursor: 'pointer',
                  padding: '4px 8px',
                  borderRadius: 6,
                  background: '#f8f9fa',
                  border: '1px solid #e9ecef',
                  transition: 'all 0.2s ease'
                }}>
                  <Avatar 
                    icon={<UserOutlined style={{ fontSize: '10px', color: '#52c41a' }} />} 
                    size="small" 
                    style={{ background: '#f6ffed', border: '1px solid #b7eb8f' }}
                  />
                  <Text style={{ fontSize: '12px', color: '#333' }}>
                    {user.phone ? `***${user.phone.slice(-4)}` : '用户'}
                  </Text>
                  <DownOutlined style={{ fontSize: '8px', color: '#1890ff' }} />
                </div>
              </Dropdown>
            )}
          </Space>
        </Header>

        {/* 主要内容区域 */}
        <Content style={{ padding: 24, background: '#f0f2f5' }}>
          <Outlet />
        </Content>
      </AntLayout>
    </AntLayout>
  )
}

export default Layout